<template>
  <div id="out-ticket-type">
    <common
    :loading='loading'
    :tableHeight='tableHeight'
    :searchShopName='searchShopName'
    :tableData='tableData'
    :pageObj='pageObj'
    @changeStore='changeStore'
    @changePageSize='changePageSize'
    @changePageIndex='changePageIndex'
    @viewHistory='viewHistory(arguments)'
    @allSet='allSet'
    @skipSlit='skipSlit(arguments)'></common>
    <!-- 批量设置组件 -->
    <select-shop :checkdList="checkdList" :titleObj='titleObj'
      :dataTree="dataTree"
      :modalShow="modalShow"
      @oncancel="selctshopCancel"
      @selctshop="volumeSet"
      v-if="modalShow">
    </select-shop>
    <!-- 二次modal弹框 -->
    <Modal
        v-model="setModalStatus"
        :transfer='false'
         :closable='true'
         :mask-closable='false'
         @on-cancel="cancelModal"
        title="设置配置项">
        <Row style="margin-left:20px">
          <Col>
            <Form ref="firmwareFormValidate" :model="firmwareFormValidate" :rules="firmwareRuleValidate" :label-width="110">
              <FormItem label="出票类型：" prop="ticketType">
                <RadioGroup v-model="firmwareFormValidate.ticketType">
                  <Radio label="0">实体票</Radio>
                  <Radio label="1" style="margin-left:25px">电子票</Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </Col>
        </Row>
        <div slot="footer">
          <Button style="margin-right:10px;width:80px" @click="skipPrevious">上一步</Button>
          <Button type="primary" style='width:80px' @click="sureSet">确定</Button>
        </div>
    </Modal>
    <!-- 侧边栏 -->
    <Drawer :title="drawTitle" :closable="true" width='640' :transfer='false' v-model="openDraw" class="history-draw">
      <Row type='flex' justify="center" style="padding-top:50px;border-top: 1px solid #e8eaec;" v-if="drawTitle === '出票类型设置'">
        <Col>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="110">
            <FormItem label="门店名称：" prop="shopName">
              <Input placeholder="门店名称" v-model='formValidate.shopName' style="width:260px" :disabled='true' />
            </FormItem>
            <FormItem label="出票类型：" prop="ticketType">
              <RadioGroup v-model="formValidate.ticketType">
                <Radio label="0">实体票</Radio>
                <Radio label="1" style="margin-left:25px">电子票</Radio>
              </RadioGroup>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <div v-if="drawTitle === '历史记录'">
        <Table stripe :columns="columnsHistory" :data="tableHistoryData" :height='historyTableHeight'>
          <template slot-scope="{ row }" slot="configValue">
            <span>{{row.configValue === '1' ? '电子票': row.configValue === '0' ?'实体票':''}}</span>
          </template>
        </Table>
      </div>
      <div class="demo-drawer-footer">
        <Row type='flex' justify="end" v-if="drawTitle === '历史记录'">
          <Col>
          <Page :total="historyObj.total"
              :current="historyObj.pageIndex"
              :page-size="historyObj.pageSize"
              show-sizer
              show-total
              @on-change='changeHistoryPageIndex'
              @on-page-size-change='changeHistoryPageSize' />
          </Col>
        </Row>
        <div v-if="drawTitle === '出票类型设置'">
          <Button style="margin-right: 20px;width:80px" class="draw-btn" @click="openDraw = false">取消</Button>
          <Button type="primary" class="draw-btn" style="width:80px" @click="singleSet" :disabled='isDisabled'>确定</Button>
        </div>
        </div>
    </Drawer>
  </div>
</template>

<script>
import { iterationOutbillList, iterationHistoryList, setDicSave, getDicQuery } from '@/api/setting'
import SelectShop from '@/view/components/select-machine/select-machine.vue'
import common from '@/view/setting/components/common.vue'
import volumeStore from '@/view/setting/components/own-use/volumeStore'
import mixins from '@/view/setting/components/own-use/mixins'
export default {
  name: 'global_setting_page_20',
  mixins: [mixins, volumeStore],
  components: {
    common, SelectShop
  },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    },
    historyTableHeight () {
      let height = 0
      if (this.tableHistoryData.length > 10) {
        height = (document.documentElement.clientHeight || document.body.clientHeight) - 103
      } else {
        height = 0
      }
      return height
    }
  },
  data () {
    return {
      isDisabled: false,
      loading: true,
      orgId: '',
      serachShopId: '',
      searchShopName: '',
      openDraw: false,
      drawTitle: '出票类型设置',
      firmwareFormValidate: {
        ticketType: ''
      },
      firmwareRuleValidate: {
        ticketType: { required: true, message: '出票类型不能为空', trigger: 'change' }
      },
      formValidate: {
        shopName: '',
        ticketType: ''
      },
      ruleValidate: {
        ticketType: { required: true, message: '出票类型不能为空', trigger: 'change' }
      },
      tableData: [],
      tableHistoryData: [],
      columnsHistory: [
        {
          title: '发布时间',
          key: 'createTime'
        },
        {
          title: '出票类型',
          slot: 'configValue'
        },
        {
          title: '操作人',
          key: 'creatorName',
          width: 160
        }
      ]
    }
  },
  methods: {
    volumeSet (val) {
      this.modalShow = false
      this.setModalStatus = true
      this.checkdList = val
    },
    changeHistoryPageIndex (index) {
      this.historyObj.pageIndex = index
      this.getHistoryList()
    },
    changeHistoryPageSize (size) {
      this.historyObj.pageSize = size
      this.historyObj.pageIndex = 1
      this.getHistoryList()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    changeStore (name) {
      this.searchShopName = name
      // this.serachShopId = name.value
      this.pageObj.pageIndex = 1
      this.getData()
    },
    viewHistory (argument) {
      this.openDraw = true
      this.orgId = argument[1].orgId
      if (argument[0] === '1') {
        this.drawTitle = '出票类型设置'
        this.formValidate.shopName = argument[1].orgName
        // if (argument[1].configValue || argument[1].configValue === '0') {
        //   this.formValidate.ticketType = argument[1].configValue
        // }
        this.searchSingleSet()
      } else {
        this.drawTitle = '历史记录'
        this.getHistoryList()
      }
    },
    // 查询单个设置
    searchSingleSet () {
      getDicQuery({
        shopId: this.orgId,
        'dictKeys': 'outTicketType',
        'merchantId': this.$store.state.user.merchantId,
        'msType': '1'
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate.ticketType = res.data.data[0].outTicketType
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    skipSlit (argument) {
      this.$router.push({ name: 'outbill_slit', query: { shopName: argument[0].orgName, shopId: argument[0].orgId, type: argument[1] } })
    },
    sureSet () {
      this.$refs.firmwareFormValidate.validate((valid) => {
        if (valid) {
          let arr = this.checkdList.map(item => {
            return item.id
          })
          setDicSave({
            msType: '1',
            merchantId: this.$store.state.user.merchantId,
            outTicketType: this.firmwareFormValidate.ticketType,
            shopIds: arr
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('设置成功！')
              this.setModalStatus = false
              this.getData()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    singleSet () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          this.isDisabled = true
          setDicSave({
            msType: '1',
            merchantId: this.$store.state.user.merchantId,
            outTicketType: this.formValidate.ticketType,
            shopIds: [this.orgId]
          }).then(res => {
            this.isDisabled = false
            if (res.data.status === 200) {
              this.$Message.success('设置成功！')
              this.openDraw = false
              this.getData()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    // 获取历史记录
    getHistoryList () {
      iterationHistoryList({
        merchantId: this.$store.state.user.merchantId,
        belongId: this.orgId,
        configKey: 'outTicketType',
        offset: this.historyObj.pageSize * (this.historyObj.pageIndex - 1),
        limit: this.historyObj.pageSize
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.tableHistoryData = result.data || []
          this.historyObj.total = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    },
    // 获取跑马灯列表
    getData () {
      this.loading = true
      iterationOutbillList({
        merchantId: this.$store.state.user.merchantId,
        shopName: this.searchShopName,
        // shopId: this.serachShopId,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount || 0
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang='less'>
  #out-ticket-type {
    .ivu-drawer-body {
      padding: 0;
      height: calc(~"100% - 103px");
    }
    .ivu-drawer-header {
      border-bottom: 0;
    }
    .history-draw {
      .demo-drawer-footer {
        width: 640px;
        position: fixed;
        bottom: 0;
        right: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
      }
    }
  }
</style>
